<template>
	<view class="columnbox wdh-100 content">
		<view class="columnbox info-box">
			<view class="rowbox wdh-100 jus store-name">{{name}}</view>
			<view class="wdh-100 info-desc">{{type==1?'自动洗车服务':'自助洗车服务'}}
			</view>
			<view class="info-price">费用20.00分钟15.00元，每超1分钟增加费用0.60元
			</view>
		</view>
		<view class="columnbox info-box">
			<view class="rowbox wdh-100 pay-box spb" @click="curpay=1">
				<view class="rowbox">
					<image src="/static/img/wallet.png" mode="widthFix" class="icon-img"></image>
					<view class="pay-title">余额 ¥ {{walletinfo.cash}}</view>
				</view>
				<image v-if="curpay==1" class="sel-icon" src="/static/img/sel.png" mode="widthFix"></image>
				<image v-else class="sel-icon" src="/static/img//unsel.png" mode="widthFix"></image>
			</view>
			<view class="rowbox wdh-100 pay-box spb" @click="curpay=2">
				<view class="rowbox">
					<image src="/static/img/wx.png" mode="widthFix" class="icon-img"></image>
					<view class="pay-title">微信支付</view>
				</view>
				<image v-if="curpay==2" class="sel-icon" src="/static/img/sel.png" mode="widthFix"></image>
				<image v-else class="sel-icon" src="/static/img//unsel.png" mode="widthFix"></image>
			</view>
			<view class="rowbox wdh-100 pay-box spb" style="border: none;" @click="curpay=3">
				<view class="rowbox">
					<image src="/static/img/yhq.png" mode="widthFix" class="icon-img"></image>
					<view class="pay-title">券支付 {{couponNum}} 张</view>
				</view>
				<view class="rowbox coupon-title" v-if="couponflag" @click="chooseCoupon">
					<!-- <view style="width: 300rpx;text-align: right;">xxxx优惠券</view> -->
					<u-icon name="arrow-right" size="24rpx"></u-icon>
				</view>
				<template v-else>
					<image v-if="curpay==3" class="sel-icon" src="/static/img/sel.png" mode="widthFix"></image>
					<image v-else class="sel-icon" src="/static/img//unsel.png" mode="widthFix"></image>
				</template>
			</view>
		</view>
		<view class="wdh-100" style="height: 200rpx;"></view>
		<view class="rowbox bottom-box">
			<template v-if="curpay==1">
				<view v-if="walletflag" class="rowbox pay-btn">确认支付 ¥20</view>
				<view v-else class="rowbox pay-btn">充值</view>
			</template>
			<template v-else-if="curpay==2">
				<view class="rowbox pay-btn confirm-btn" @click="wxPay">确认支付 ¥20</view>
			</template>
			<template v-else-if="curpay==3">
				<view v-if="couponflag" class="rowbox pay-btn">券支付</view>
				<view v-else class="rowbox pay-btn" @click="">购买卡券</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curpay: 1, //支付方式
				walletflag: false, //余额是否充足
				couponflag: true, //是否有优惠券
				id: '',
				name: '',
				type: '',
				walletinfo: '',
				couponNum: 0,
				submitflag: false
			};
		},
		onLoad(options) {
			this.id = options.id
			this.name = options.name
			this.type = options.type
		},
		onShow() {
			this.getWallet()
			this.getCoupon()
		},
		methods: {
			// 微信支付
			wxPay() {
				if (!this.submitflag) {
					this.submitflag = true
					uni.showLoading({
						title: '加载中'
					})
					this.$req.get(`/xcx/stationDoor/open/${this.id}/`).then(res => {

					})
				}
			},
			getCoupon() {
				this.$req.get('/xcx/userCoupons/list/use', {
					useStatus: 0,
					pageSize: 1,
					pageNum: 1
				}).then(res => {
					this.couponNum = res.data.total
				})
			},
			getWallet() {
				this.$req.get('/xcx/userWallet').then(res => {
					if (res.data.data) {
						this.walletinfo = res.data.data
					}
				})
			},
			buyCoupon() {
				uni.navigateTo({
					url: '/pages/coupon/buyCoupon'
				})
			},
			chooseCoupon() {
				uni.navigateTo({
					url: '/pages/coupon/list'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
		background: #F7F7F7;
		min-height: 100vh;
		justify-content: flex-start;
	}

	.info-box {
		background: #fff;
		border-radius: 20rpx;
		width: 710rpx;
		margin-top: 20rpx;
		padding: 20rpx 20rpx;
	}

	.store-name {
		font-size: 32rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
		border-bottom: #EFEFEF solid 1px;
	}

	.info-desc {
		font-size: 32rpx;
		margin-top: 20rpx;
	}

	.info-price {
		margin-top: 20rpx;
		width: 100%;
		color: rgba(233, 157, 66, 1);
		font-size: 28rpx;
	}

	.pay-box {
		padding: 32rpx 32rpx;
		border-bottom: #F0F0F0 solid 1px;

		.icon-img {
			width: 50rpx;
			height: 50rpx;
		}

		.pay-title {
			margin-left: 20rpx;
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
		}

		.sel-icon {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		padding: 20rpx 32rpx;
		padding-bottom: 40rpx;
		z-index: 9;
		border-top: #f2f5f5 solid 1px;
		width: 100%;
		justify-content: space-between;
	}

	.pay-btn {
		font-size: 28rpx;
		color: #fff;
		background: #1E72CA;
		border-radius: 10rpx;
		width: 100%;
		height: 90rpx;
	}

	.coupon-title {
		font-size: 32rpx;
	}
</style>